<template>
	<view class="wraps">
		<view class="lists">
			<view class="item">
				<view class="left">
					<view class="">
						名称：{{info && info.card && info.card.cardName}}
					</view>
					<view class="">
						卡号：{{info && info.card && info.card.cardNo}}
					</view>
					<view class="">
						截止时间：{{(info && info.card && info.card.peisonEndTime) && info.card.peisonEndTime.split(' ')[0]}}
					</view>
					<view class="">
						<!-- 可发货： -->
						{{info && info.finish}}
					</view>
				</view>
				<view class="right">
					<image class="img" :src="info && info.card && info.card.cardImg" mode=""></image>

				</view>
			</view>
		</view>




		<view class="addr" v-if="orderInfo">
			<view v-if="status!='发货中'">
				<view class="detailaddr">
					<view class="left">
						承运来源：{{orderInfo.logisticsName}}
					</view>
					<view class=""></view>
				</view>
				<view class="detailaddr">
					<view class="left" style="width: 80%;     word-break: break-all;">
						运单号码：{{orderInfo.logisticsNo}}
					</view>
					<view class="">
						<view class="copy" @click="copy(orderInfo.logisticsNo)">
							复制
						</view>
					</view>
				</view>
				<u-button @click="go(orderInfo.logisticsNo)" class="sub" type="primary" shape="circle" :ripple="true"
					ripple-bg-color="#909399">查看物流</u-button>
			</view>
			
			<view v-else>
				<u-empty font-size="26" icon-size="174" class="nodata" src="../../../static/aidex/images/nodata.png"
					text="仓库处理中~" mode="list"></u-empty>
			
			</view>
		</view>

		<view v-else>
			<u-empty font-size="26" icon-size="174" class="nodata" src="../../../static/aidex/images/nodata.png"
				text="订单不存在! 未发货~" mode="list"></u-empty>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				show1: false,
				zhouqi: '',
				time: "",
				selector: [],
				show: false,
				addr: null,
				cardId: '',
				orderInfo: null,
				actionSheetList: [

				],
				status: ''
			}
		},
		onLoad(e) {
			this.cardId = e.cardId;
			this.status = e.status
			this.getList()
			this.getInfo(e)

		},
		methods: {

			getInfo(e) {
				this.$u.api.orderDetailByPlanId({
						planId: e.id
					})
					.then((res) => {
						if (res.code == 0) {
							this.orderInfo = res?.order
						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							// console.log("请求数据失败");
						}
					});
			},

			getList() {
				this.$u.api.cardPlanList({
						cardId: this.cardId
					})
					.then((res) => {

						if (res.code == 0) {

							this.info = res


						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});

			},

			go(item) {


				window.location.href = `https://m.kuaidi100.com/result.jsp?nu=${item}`
			},

			copy(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},

			chioceAddr() {
				uni.navigateTo({
					url: "/pages/sys/msg/creatAddr"
				})
			},
			creat() {
				// if (!this.addr) {
				// 	this.$u.toast('请您添加收货地址');
				// 	return
				// }
				if (!this.zhouqi) {
					this.$u.toast('请选择发货周期');
					return
				}
				if (!this.time) {
					this.$u.toast('请选择发货时间');
					return
				}

			},
			gettime(e) {
				this.time = e.result;
				console.log(e.result, 5555);
			},
			confirm(e) {

				this.zhouqi = e[0] + 1
			},
			getday() {
				this.show = true
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>

<style scoped>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>

<style scoped lang="scss">
	/deep/ .u-icon__label{
		color: #333 !important;
	}
	.sub {
		margin: 48rpx 0 0;
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.nodata {
		padding: 80px 0;
	}

	.copy {
		font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
		font-weight: normal;
		font-size: 21rpx;
		color: #005850;
		line-height: 29rpx;
		width: 75rpx;
		height: 32rpx;
		background: #E5E5E5;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sub {
		margin: 50rpx 0 0;
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.wraps {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 53rpx 58rpx;
		min-height: 90vh;
	}



	.addr {
		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 30rpx;
			color: #024546;
			line-height: 42rpx;
			margin-bottom: 17rpx;
		}

		.detailaddr {
			margin-bottom: 17rpx;
			padding: 20rpx 34rpx;
			background: #FFFFFF;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #005850;
				line-height: 35rpx;
				text-align: left;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 22rpx;
				}

				>view {
					flex: 1;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.times {
					margin-right: 20rpx;
					background: #005850;
					border-radius: 12rpx;
					padding: 8rpx 13rpx;
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 35rpx;
				}
			}

			.day {
				min-width: 57rpx;
				height: 36rpx;
				border-radius: 12rpx;
				border: 1rpx solid #005850;
				margin: 0 5px;
				text-align: center;
			}
		}
	}

	.lists {

		.item {
			position: relative;
			height: 270rpx;
			background: url('../../../static/aidex/images/bg.png') no-repeat;
			background-size: cover;
			border-radius: 14rpx;
			margin-bottom: 41rpx;
			display: flex;
			justify-content: space-between;

			.status {
				position: absolute;
				right: 0;
				padding: 2rpx 10rpx 3rpx;
				background: #7F7F7F;
				border-radius: 18rpx 0rpx 0rpx 18rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				top: 25rpx;
				z-index: 5;

				&.doing {
					background: #009585 !important;
				}

				&.over {
					background: #F59A23 !important;
				}
			}

			.left {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 135rpx 0 0 30rpx;
			}

			.right {
				padding-top: 51rpx;
				margin-right: 30rpx;

				.img {
					width: 212rpx;
					height: 187rpx;

				}

				.dz {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding: 4rpx 22rpx;
					background: linear-gradient(270deg, #CB9A71 0%, #E6C9A2 100%);
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
